<template>
  <div class="tab-cont tab-cont-collect">
    <div class="title lg:!px-0">
      <div class="flexbox flex-align-center flex-justify-between flex flex-row">
        <h1 class="name">{{ $t('userPanel.collect') }}</h1>
      </div>
    </div>
    <div class="flexbox flex-align-center flex-justify-between filter lg:!px-0">
      <div class="tabs flexbox flex-align-center">
        <div :class="['tab', collectTabId == '' ? 'active' : '']" @click="collectTabChange('')">
          {{ $t('filter.all') }}
        </div>
        <!-- <div
          :class="['tab capitalize', collectTabId == 1 ? 'active' : '']"
          @click="collectTabChange(1)"
        >
          {{ $t("filter.gameCard") }}
        </div> -->
        <!-- <div
          :class="['tab', collectTabId == 2 ? 'active' : '']"
          @click="collectTabChange(2)"
        >
          {{ $t("filter.gameCharging") }}
        </div> -->
      </div>
    </div>
    <div class="list lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-2 lg:px-0 grid grid-cols-1 gap-4 px-4 py-4 w-full">
      <div class="item flexbox flex-align-center group col-span-1 p-4" v-for="item in collectList" :key="item.id">
        <nuxt-link class="flex items-center" :to="localePath(`/product/${item.code}`)">
          <img
            loading="lazy"
            class="img flex-none"
            :src="$globalFn.imgPrefixUrl(item.image, '72:72')"
            alt="Product thumbnail"
            title="Product preview"
            srcset=""
          />
          <div class="text">
            <div class="name flex gap-2 items-center">
              <span class="line-clamp-1">
                {{ item.goods_name || '' }}
              </span>
               <img src="~/assets/img/discountLabel.png" class="size-4" alt="Discount label" title="Product discount" v-if="item.max_discount > 0" />
            </div>
            <div class="type">{{ item.region_name || '' }}</div>
          </div>
        </nuxt-link>
        <div class="absolute right-[16px] bottom-[16px] size-[32px]">
          <img
            loading="lazy"
            class="size-full lg:group-hover:block lg:hidden"
            src="https://cd.sealmg.com/assets/img/collect-has.png"
            alt="Remove from favorites"
            title="Remove from collection"
            @click.stop="removeCollect(item)"
          />
        </div>
      </div>
    </div>
    <div class="flex justify-center w-full" v-if="collectList.length == 0">
      <no-data type="collect" :loading="loading"></no-data>
    </div>
    <el-dialog class="confirm-dialog" title="" width="522px" :show-close="false" :close-on-click-modal="false" :visible.sync="showDelete">
      <div class="flexbox flex-tb flex-align-center box-content">
        <div class="title">{{ $t('confirmDialog.removeFavorites') }}</div>
        <div class="title-desc">
          {{ $t('confirmDialog.removeFavoritesDesc') }}
        </div>
        <div class="!p-4 max-lg:w-full">
          <div class="goods flexbox flex-align-center px-0 !w-full cursor-pointer">
            <img
              loading="lazy"
              class="img"
              :src="$globalFn.imgPrefixUrl(curRow.image, '72:72')"
              alt="Product image"
              title="Collection item preview"
              srcset=""
            />
            <div class="info">
              <div class="name line-clamp-1 !w-auto">{{ curRow.goods_name }}</div>
              <div class="type">{{ curRow.region_name || '' }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="handle flexbox flex-align-center flex-justify-between">
        <el-button class="btn cancle-btn !w-1/2" @click="cancleBtn">{{ $t('formBtn.cancel') }}</el-button>
        <el-button class="btn delete-btn !w-1/2" @click="deleteCollect">{{ $t('formBtn.remove') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  export default {
    props: {},
    data() {
      return {
        collectTabId: '',
        collectList: [],
        showDelete: false,
        curRow: {},
        loading: true,
        limit: 9999
      }
    },
    computed: {},
    created() {
      this.getCollectList()
    },
    methods: {
      getCollectList() {
        this.loading = true
        this.$axios
          .get(`/api/collect/index?page=1&limit=${this.limit}&type=${this.collectTabId}`)
          .then(res => {
            this.loading = false
            this.collectList = res || []
          })
          .catch(err => {
            this.collectList = []
            this.loading = false
          })
      },
      collectTabChange(type) {
        this.collectTabId = type
        this.getCollectList()
      },
      removeCollect(item) {
        this.curRow = item
        this.showDelete = true
      },
      cancleBtn() {
        this.showDelete = false
      },
      deleteCollect: throttle(
        function () {
          this.$axios.post(`/api/collect/cancel`, { goods_id: this.curRow.id }, { setConfig: { showSuccessMsg: true } }).then(res => {
            this.$store.dispatch('user/getUserInfo')
            this.getCollectList()
            this.cancleBtn()
          })
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      ),
      goDetail(item) {
        let gotoMap = {
          1: this.localePath(`/cards/${item.code}`),
          2: this.localePath(`/game-recharge/${item.code}`)
        }
        this.$router.push({
          path: gotoMap[item.type] || ''
        })
        // if (item.type == 1) {
        //   this.$router.push({
        //     path: this.localePath(`/cards/${item.code}`),
        //   });
        // } else if (item.type == 2) {
        //   this.$router.push({
        //     path: this.localePath(`/game-recharge/${item.code}`);
        //   });
        // }
      }
    }
  }
</script>
<style lang="less" scoped>
  .title {
    box-sizing: border-box;
    padding: 20px 24px 12px 24px;
    .row {
      padding-bottom: 8px;
      border-bottom: @border-1-fo;
    }
    .name {
      font-weight: 500;
      font-size: 22px;
      color: @font-color-14;
    }
    .btn {
      box-sizing: border-box;
      padding: 0;
      width: 58px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      text-align: center;
      color: @font-color-26;
      border-radius: 25px;
      border: none;
    }
  }
  .tab-cont {
    width: 100%;
    .filter {
      box-sizing: border-box;
      padding: 0 24px;
      height: 60px;
      border-bottom: @border-1-fo;
      .tabs {
        .tab {
          padding: 0 16px;
          font-size: 16px;
          color: @font-color-99;
          cursor: pointer;
        }
        .tab.active {
          position: relative;
          color: @theme-color;
        }
        .tab.active::before {
          content: '';
          display: block;
          position: absolute;
          left: 50%;
          bottom: -18px;
          width: 64px;
          height: 2px;
          background: @theme-color;
          transform: translateX(-50%);
        }
      }
    }
  }
  .tab-cont-collect {
    .list {
      // padding-top: 20px;
      // padding-bottom: 12px;
      .item {
        position: relative;
        box-sizing: border-box;
        // padding: 0 16px;
        // margin-left: 19px;
        // margin-bottom: 20px;
        // width: 387px;
        // height: 105px;
        background: @color-f7;
        border-radius: 16px;
        cursor: pointer;
        .collect-icon {
          position: absolute;
          right: 16px;
          bottom: 16px;
          width: 32px;
          height: 32px;
          display: none;
        }
        .img {
          width: 72px;
          height: 72px;
          border-radius: 12px;
        }
        .text {
          margin-left: 12px;
          .name {
            // width: 231px;
            font-weight: 500;
            font-size: 14px;
            color: @font-color-26;
          }
          .type {
            margin-top: 8px;
            font-size: 12px;
            color: @font-color-66;
          }
        }
      }
      .item:nth-child(2n + 1) {
        margin-left: 0;
      }
      .item:hover {
        background: rgba(0, 0, 0, 0.06);
        .collect-icon {
          display: block;
        }
      }
    }
  }
</style>
